<template>
  <div
    class="radio_box"
    :style="{ width: (options.length * widthNum * setRem()) / 16 + 'px' }"
    ref="el_tabs"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
      <el-tab-pane
        :label="item[props.label]"
        :name="item[props.value]"
        v-for="(item, index) in options"
        :key="index"
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import setRem from "@/utils/px2remref";
export default {
  name: "ComRadio",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    props: {
      type: Object,
      default: () => {
        return {
          label: "label",
          value: "value",
        };
      },
    },
    widthNum: {
      type: Number,
      default: 60,
    },
    options: {
      type: Array, // radio选项列表JSON串，如此项有值，则直接用此选项中的数据，不会进行数据请求去获取数据。即优先级options>url。默认为空，非必传。
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      activeName: "",
    };
  },
  watch: {
    value: {
      // 对对象进行深度监听
      handler(newVal, oldVal) {
        this.activeName = newVal;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.initStyle();
  },

  methods: {
    initStyle() {
      this.$nextTick(() => {
        this.$refs.el_tabs.style.marginRight =
          "-" + this.options.length * 2 + "px";
      });
    },
    setRem() {
      return setRem();
    },
    handleClick(tab, event) {
      
      this.$emit("handleClick", tab);
    },
  },
};
</script>
<style lang="scss" scoped>
.radio_box {
  width: 100%;
}
</style>